<template>
  <div class="BaseInfo-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
        <el-button type="text" @click="dialogFormVisible = true" style="float: right; padding: 3px 0">编辑</el-button>
        <!-- 编辑个人信息弹窗 -->
        <el-dialog title="基本信息" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="用户昵称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所在地区" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" :label-width="formLabelWidth">
              <div class="block">
                <el-date-picker v-model="birthday" type="date" placeholder="选择日期"> </el-date-picker>
              </div>
            </el-form-item>
            <!-- <el-form-item label="" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item> -->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="content">
        <ul>
          <li>
            <div class="propName">用户昵称</div>
            <div class="propContent">五七</div>
          </li>
          <li>
            <div class="propName">用户名</div>
            <div class="propContent">zhangsna</div>
          </li>
          <li>
            <div class="propName">性别</div>
            <div class="propContent">男</div>
          </li>
          <li>
            <div class="propName">所在地区</div>
            <div class="propContent">aa</div>
          </li>
          <li>
            <div class="propName">出生日期</div>
            <div class="propContent">2000-22-22</div>
          </li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      birthday: '',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  }
}
</script>

<style lang="less" scoped>
ul {
  list-style: none;
}
.BaseInfo-container {
  .box-card {
    width: 100%;
    /deep/.el-card__header {
      padding: 9px 20px;
      font-weight: 600;
    }
    li {
      display: flex;
      font-size: 14px;
      margin-bottom: 32px;
    }
    .propName {
      width: 56px;
    }
    .propContent {
      margin-left: 30px;
    }
  }
}
</style>
